<template>
  <div>
    <RePage>
      <MyFormCreate :clear-event="getTableList" v-model="searchFrom" :rule="searchFormRules" :key="key">
        <template #field-createdAt="scope">
          <el-form-item>
            <el-date-picker type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
              value-format="YYYY-MM-DD" placeholder="请选择创建时间" style="width: 100%" v-model="searchFrom.createdAt"
              @change="dateChange" />
          </el-form-item>
        </template>
        <el-button type="primary" @click="DebounceGetTableList">搜索</el-button>
        <sj-button custom-type="sinfo" @click="DebounceResetting">重置</sj-button>
      </MyFormCreate>
      <div>
        <!-- <el-button type="primary" :icon="Plus" @click="add">添加</el-button> -->
        <!-- <el-button type="danger" :icon="Delete" :disabled="!selectionData.length" @click="deletes()">批量删除</el-button> -->
      </div>
      <pure-table  :data="tableData.data" :columns="initPureTableConfig(roleTableConfig)" showOverflowTooltip border
        @selection-change="selectionChange" :isShowPag="false">
        <template #commStatus="{ row }">
          <el-tag :type="DEVICESTATUSTABLE[row.commStatus]?.type">{{ isNullOrEmpty( DEVICESTATUSTABLE[row.commStatus]?.label ) }}</el-tag>
        </template>
        <template #useType="{ row }">
          <span>{{ isNullOrEmpty( USER_TYPE[row.useType]?.label ) }}</span>
        </template>
        <template #empType="{ row }">
        <span v-if="row.empType == 1">项目授权</span>
        <span v-if="row.empType == 2">家庭授权</span>
        <span v-if="row.empType == 3">序列号授权</span>
        </template>
        <!-- <template #supUnityName="{ row }">
          <span v-if="row.useType == 1">{{ isNullOrEmpty( row.proUnityName ) }}</span>
          <span v-else>{{ isNullOrEmpty( row.famUnityName ) }}</span>
        </template> -->
        <template #city="{ row }">
          <span v-for="item in row.city"> {{ item }}</span>
         
          <!-- <span v-if="row.projectCity!==null">
            <span v-for="item in row.projectCity">{{ isNullOrEmpty( item ) }}</span>
          </span>
          <span v-if="row.familyCity!==null">
            <span v-for="item in row.familyCity">{{ isNullOrEmpty( item ) }}</span>
          </span> -->
        </template>
        <template #action="{ row }">
          <el-space>
            <sj-link v-auth="'system.sup-device.delete'" custom-type="sred" :underline="false" @click="deletes(row)"  >删除授权</sj-link>
          </el-space>
        </template>
      </pure-table>
      <div class="mt-5">
        <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
          :layout="PAGE_LAYOUT" :total="tableData.total" @size-change="getTableList" @current-change="getTableList" />
      </div>
    </RePage>
  </div>
</template>
<script lang="ts" setup>
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import {
  usePageVariablesStoreHook,
} from "@/store/modules/pageVariables";
const operate = usePageVariablesStoreHook().getManage();
import { USER_TYPE,AUTHORIZER_TYPE_FORMCREATE } from "@/constant/regulatory-authorities"
import { DEVICESTATUSTABLE,DEVICESTATUS } from "@/constant/device-mangenment"
import MyFormCreate from "@/components/MyFormCreate/index.vue";
import RePage from "@/components/RePage/index.vue";
import ReTable from "@/components/ReTable/index.vue";
import infos from "./info.vue";
import { reactive, ref, h } from "vue";
import { PAGE_LAYOUT } from "@/constant";
import { Plus, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  gedevicesList, gedevicesDelete
} from "@/api/manage/regulatory-authorities/regulatory-authorities/index";
import { titles, defaultSearchForm, prompt, defaultInfoForm } from "./index";
import { addDialog } from "@/components/ReDialog";
import {
  cloneDeep,
  isAllEmpty,
  deviceDetection,
  debounce
} from "@pureadmin/utils";
import { message } from "@/utils/message";
import { customDebounce, customPromiseDebounce } from "@/utils/functions";

const searchFrom = ref(defaultSearchForm());
const key = ref(0);
const showInfo = ref();
const formRef = ref();
const tableData = reactive({
  data: [],
  total: 0
});

const searchFormRules = [
  {
    type: "input",
    field: "deviceSN",
    title: titles.deviceSN,
    value: null,
    props: {
      placeholder: prompt.deviceSN,
      clearable: true
    }
  },
  {
    type: "input",
    field: "useUnityName",
    title: "所属单位",
    value: null,
    props: {
      placeholder: "请输入所属单位",
      clearable: true
    }
  },
  {
    type: "input",
    field: "projectName",
    title:"所属项目",
    value: null,
    props: {
      placeholder: "请输入所属项目",
      clearable: true
    }
  },
  {
    type: "input",
    field: "nickName",
    title: "个体用户名",
    value: null,
    props: {
      placeholder:"请输入个体用户名",
      clearable: true
    }
  },
  {
    type: "select",
    field: "commStatus",
    title: "设备状态",
    value: null,
    options:DEVICESTATUS,
    props: {
      placeholder: "请选择设备状态",
      clearable: true
    }
  },
  {
    type: "select",
    field: "empType",
    title: "授权来源",
    value: null,
    options:AUTHORIZER_TYPE_FORMCREATE,
    props: {
      placeholder:"请选择授权来源",
      clearable: true
    }
  },
  { type: "number", field: "page", title: "page", hidden: true },
  { type: "number", field: "limit", title: "limit", hidden: true }
];
const selectionData = ref([]);
const roleTableConfig = [
  { prop: "id", label: titles.id, width:  100 },
  { prop: "unityName", label: titles.unityName, minWidth: 150 },
  { prop: "useUnityName", label: titles.useUnityName, minWidth: 150 },
  { slot: "useType", label: titles.useType, minWidth: 100 },
  { prop: "useInfo", label: titles.useInfo, minWidth: 150 },
  { slot: "city", label: titles.city, minWidth: 150 },
  { prop: "deviceSN", label: titles.deviceSN, minWidth: 100 },
  { slot: "commStatus", label: titles.commStatus, minWidth: 100 },
  { slot: "empType", label: titles.empType, minWidth: 160 },
  { prop: "updatedAt", label: titles.updatedAt, minWidth: 160 },
  { slot: "action", label: "操作", width: 90, fixed: "right" }
];
const dateChange = (e) => {
  if (e) {
    searchFrom.value.startTime = e[0];
    searchFrom.value.endTime = e[1];
  } else {
    searchFrom.value.startTime = '';
    searchFrom.value.endTime = '';
  }
  getTableList()
}
onMounted(() => {
  getTableList();
});
// 获取列表数据
const getTableList = () => {
  gedevicesList(searchFrom.value).then(res => {
    if (res.code === 200) {
      tableData.data = res.result.data;
      tableData.total = res.result.total;
    }
  });
};
// 重置搜索栏
const resetting = () => {
  //点击重置按键
  Object.assign(searchFrom.value, defaultSearchForm());
  key.value++;
  getTableList();
};

// 新增
const add = row => {
  showInfo.value = {};
  // openDialog();
};
// 编辑
const edit = row => {
  showInfo.value = {};
  // openDialog("编辑", row);
};
// 删除
const deletes = (row?) => {
  if (row.empType == 1) {
    ElMessage({
      type: "error",
      message: "请到项目授权中删除"
    });
    return;
  }
  if (row.empType == 2) {
    ElMessage({
      type: "error",
      message: "请到家庭授权删除"
    });
    return;
  }
  ElMessageBox.confirm(`确认删除${row ? "当前" : "选中的"}数据?`, "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    gedevicesDelete({
      id: row.id,
      unityId:operate.unityId,
      empType:row.empType
    }).then(res => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
        getTableList();
      }
    });
  });
};
// 开启弹窗

const selectionChange = data => {
  selectionData.value = data;
};
// 获取列表
const DebounceGetTableList = debounce(getTableList, 1000, true);
// 重置
const DebounceResetting = debounce(resetting, 1000, true);
// 添加请求
// const DebounceAddInfo = customPromiseDebounce(addInfo, 1000, true);
// 编辑请求
// const DebounceEditInfo = customPromiseDebounce(editInfo, 1000, true);
</script>
<style lang="scss" scoped></style>
